import React, {Component} from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components'
import {Button} from 'antd';


//创建一个标签叫Appwrapper，这个标签内所有的div可以根据classname来设置样式
export const Appwrapper = styled.div`
  .test {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .originalValue {
    color: #282c34;
  }


`
//复习class类
// class Person{
//     constructor(name,sex,age) {
//         this.name = name
//         this.sex = sex
//         this.age = age
//     }
//     work(){
//         console.log("上班")
//     }
//     trafic(){
//         console.log("在路上")
//     }
// }
// class Student extends Person{
//     study(){
//         console.log("学习")
//     }
// }
// const a = new Student('友人A','女',17)
// a.study()
// a.work()
// a.trafic()

export default class Counter extends React.Component {
    render() {
        return (
            <div className="testDiv">
                <Button>-1</Button>
                <p className="originalValue">0</p>
                <Button>+1</Button>
            </div>
        )
    }
}



const App: React.FC = () => (
    <React.StrictMode>
        <Appwrapper>
            <div className='test'></div>
            <Button type="primary">Primary</Button>
        </Appwrapper>
    </React.StrictMode>
)
// root.render(
//     <React.StrictMode>
//         <Appwrapper>
//             <div className='test'></div>
//             <Button type="primary">Primary</Button>
//         </Appwrapper>
//     </React.StrictMode>
// );
